<template>
  <div class="taskplan">
    <el-card class="hover" style="padding: 0 20px">
      <!-- 列表展示=--接受计划 -->
      <div class="show-plan">
        <el-table ref="Table" :data="tableData" tooltip-effect="dark">
          <el-table-column prop="count" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="planNumber" label="计划编号" align="center"></el-table-column>
          <el-table-column prop="planName" label="所属计划" align="center"></el-table-column>
          <el-table-column prop="typeName" label="任务类型" align="center"></el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
          <el-table-column prop="patrolGrid" label="巡查范围" align="center"></el-table-column>
          <el-table-column prop="lastTime" label="创建时间" align="center"></el-table-column>
          <el-table-column fixed="right" width="200" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="info" @click="openDetailWin(scope.row)" size="mini">详情</el-button>
              <el-button type="success" @click="acceptPlan(scope.row)" size="mini" v-if="scope.row.plannedProgress == 1"
                >接收</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="任务详情" :visible.sync="planDetailWin" width="30%">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <el-form label-position="right" label-width="120px" :model="taskDetailData">
              <el-form-item label="计划编号：">
                <el-input v-model="taskDetailData.planNumber" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="所属计划：">
                <el-input v-model="taskDetailData.planName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="任务类型：">
                <el-input v-model="taskDetailData.typeName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="巡查主体：">
                <el-input v-model="taskDetailData.patrolSubject" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="主体类型：">
                <el-input v-model="taskDetailData.subjectType" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="开始时间：">
                <el-input v-model="taskDetailData.startTime" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="结束时间：">
                <el-input v-model="taskDetailData.endTime" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="巡查范围：">
                <el-input v-model="taskDetailData.patrolGrid" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="任务描述：">
                <el-input type="textarea" :rows="3" :disabled="true" v-model="taskDetailData.planDescribe"> </el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/project'
export default {
  data() {
    return {
      planDetailWin: false,
      tableData: [],
      taskDetailData: [],
    }
  },
  created() {
    this.getPlan()
  },
  methods: {
    // 获得计划列表
    getPlan() {
      api.taskList({ current: 1, limit: 10 }).then(res => {
        if (res.code == '200') {
          let count = 1
          this.tableData = res.data.records
          this.tableData.forEach(item => {
            item.startTime = item.startTime.split(' ')[0]
            item.endTime = item.endTime.split(' ')[0]
            item.patrolGrid = Object.values(item.patrolGrid).join('，')
            item.subjectType = Object.values(item.subjectType).join('，')
            item.count = count++
          })
        }
      })
    },
    // 计划详情
    openDetailWin(row) {
      this.planDetailWin = true
      this.taskDetailData = row
    },
    // 接受分发的计划
    acceptPlan(row) {
      api.changeProgress({ id: row.id, plannedProgress: 2 }).then(res => {
        if (res.code == '200') {
          this.$message({
            message: '已接收',
            type: 'success',
          })
          this.getPlan()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.select {
  background-color: pink;
  margin-bottom: 30px;
}
.handle-task {
  display: flex;
}
.add-task {
  margin: 0 20px 10px 0;
}
.show-plan {
  margin-bottom: 20px;
}
</style>
